<template>
  <div class="relative inline-block text-left"
    ref="select">
    <div class="group">
      <div class="flex items-center text-base font-medium text-gray-1000 hover:text-purple-1300 commonBtn cursor-pointer whitespace-nowrap to-logout"
        v-if="toolify_isLogin"
        :loading="logoutLoading"
        @click="showDropdown">
        <!-- <img src="@/static/images/toolify_picture.png"
          class="w-10 mr-3">
        <span class="whitespace-nowrap">{{$t('logout')}}</span> -->

        <div class="user-header"
          :class="{ isHover: isShowDropdown }">
          <span class="avatar"
            v-if="userinfo && (userinfo.account || userinfo.username)">
            {{
              userinfo && (userinfo.account || userinfo.username)
                ? userinfo.account
                  ? userinfo.account
                  : userinfo.username
                : "-" | filterFirstString
            }}
          </span>
          <img src="@/static/images/toolify_picture.png"
            class="w-10 mr-3"
            v-else>
          <!-- <em>
            {{
              userinfo && (userinfo.account || userinfo.username)
                ? userinfo.account
                  ? userinfo.account
                  : userinfo.username
                : "-" | filterEmail
            }}
          </em> -->

          <svg class="-mr-1 h-5 w-5"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
            :class="{show:isShowDropdown}">
            <path fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <div class="absolute right-0 xxl:left-0 xxl:right-auto z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none optionsMax"
        role="menu"
        aria-orientation="vertical"
        tabindex="-1"
        v-show="isShowDropdown">
        <div class="px-4 divide-y divide-gray-2000 "
          role="none">
          <div class="text-base text-gray-1000 username py-4 font-semibold">
            {{
              userinfo && (userinfo.account || userinfo.username)
                ? userinfo.account
                  ? userinfo.account
                  : userinfo.username
                : "-" | filterEmail
            }}
          </div>
          <common-link path="/user"
            class="menu-fastlink"
            :class="{'actived': ($route.name === 'lang-user' || $route.name === 'user') && ($route.name === 'lang-user' || $route.name === 'user') && (!$route.query || !$route.query.tab)}">
            <svg-icon className="text-xl"
              iconName='payment'></svg-icon>
            <span>{{$t('user_myProfile')}}</span>
          </common-link>
          <common-link path="/user?tab=submitAI"
            class="menu-fastlink"
            :class="{'actived': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'submitAI'}">
            <svg-icon className="text-xl"
              iconName='submit-icon'></svg-icon>
            <span>{{$t('user_submitAi')}}</span>
          </common-link>
          <common-link path="/user?tab=advertise"
            class="menu-fastlink"
            :class="{'actived': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'advertise'}">
            <svg-icon className="text-xl"
              iconName='advertise-icon'></svg-icon>
            <span>{{$t('user_advertisement')}}</span>
          </common-link>
          <common-link path="/user?tab=updateAi"
            class="menu-fastlink"
            :class="{'actived': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'updateAi'}">
            <svg-icon className="text-xl"
              iconName='update_ai'></svg-icon>
            <span>{{$t('user_updateAi')}}</span>
          </common-link>
          <common-link path="/user?tab=submitGpt"
            class="menu-fastlink"
            :class="{'actived': ($route.name === 'lang-user' || $route.name === 'user') && $route.query.tab && $route.query.tab === 'submitGpt'}">
            <svg-icon className="text-xl"
              iconName='GPT'></svg-icon>
            <span>{{$t('user_submitGpt')}}</span>
          </common-link>
          <div class="menu-fastlink justify-center"
            @click="toLogout">
            <i class="el-icon-loading"
              v-if="logoutLoading"></i>
            <svg-icon className="text-xl"
              v-else
              iconName='logout'></svg-icon>
            <span>{{$t('logout')}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'UserDropdown',
  props: {
    logoutLoading: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    '$route.query': {
      handler() {
        this.isShowDropdown = false
      },
      immediate: true,
      deep: true,
    },
  },
  filters: {
    filterFirstString: function (value) {
      let tArray = []
      if (value && value.length > 0) {
        tArray = value.split('')
      }
      return tArray && tArray.length > 0 ? tArray[0].toLocaleUpperCase() : '-'
    },
    filterEmail: function (value) {
      let tArray = []
      let email = null
      if (value && value.length > 0) {
        tArray = value.split('@')
        email = `${
          tArray[0].length > 8 ? `${tArray[0].slice(0, 8)}***` : tArray[0]
        }${value.indexOf('@') >= 0 ? `@${tArray[1]}` : ''}`
      } else {
        email = '-'
      }
      return email
    },
  },
  computed: {
    ...mapState({
      toolify_isLogin: (state) => state.toolify_isLogin,
      locale: (state) => state.locale,
      userinfo: (state) => state.userinfo,
    }),
  },
  data() {
    return {
      isShowDropdown: false,
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClick)
  },
  methods: {
    handleClick(event) {
      if (this.$refs.select) {
        let self = this.$refs.select.contains(event.target)
        if (!self) {
          this.isShowDropdown = false
        }
      }
    },
    showDropdown() {
      this.isShowDropdown = !this.isShowDropdown
    },
    toLogout() {
      if (this.logoutLoading) {
        return false
      }
      this.$emit('toLogout')
    },
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClick)
  },
}
</script>
<style lang='scss' scoped>
.user-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #191919;
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: #ebe6ff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 6px;
    font-size: 22px;
    font-weight: 600;
    color: #7150e6;
  }
  em {
    /* display: none; */
    font-style: normal;
  }
  svg {
    transition: 0.2s;
    &.show {
      transform: rotate(180deg);
    }
  }
  &:hover {
    color: #7150e6;
  }
  &.isHover {
    .svg {
      transform: rotate(180deg);
    }
  }
}
.optionsMax {
  z-index: 2007;
  .menu-fastlink {
    display: flex;
    align-items: center;
    height: 49px;
    padding: 16px 0;
    gap: 12px;
    cursor: pointer;
    span {
      font-size: 16px;
      color: #191919;
      line-height: 16px;
    }
    svg,
    i {
      font-size: 20px;
      fill: #000;
    }
    i {
      color: #7150e6;
      margin-right: 14px;
      + span {
        color: #7150e6;
      }
    }
    &:hover,
    &.actived {
      span {
        color: #7150e6;
      }
      svg,
      i {
        font-size: 16px;
        fill: #7150e6;
      }
    }
    &.actived {
      span {
        font-weight: bold;
      }
    }
    .el-icon-loading {
      margin-right: 0;
    }
  }
  .username {
    display: flex;
    align-items: center;
    height: 49px;
  }
  .ctrl {
    padding: 7px 16px 16px;
  }
}
</style>
